<template>
  <div class="home-banner">
    <el-carousel 
      :interval="5000" 
      :arrow="arrow" 
      indicator-position="inside" 
      height="100%" 
      class="banner-carousel"
      :autoplay="autoplay"
      :touch="true"
    >
      <el-carousel-item v-for="banner in banners" :key="banner.id" class="banner-item">
        <div class="banner-content" :style="{ backgroundImage: `url(${banner.image})` }" @click="handleBannerClick(banner)"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { resolveImage } from '@/utils/request'

const router = useRouter()
const isMobile = ref(false)

// 响应式配置
const arrow = computed(() => isMobile.value ? 'never' : 'hover')
const autoplay = computed(() => !isMobile.value || true) // 移动端也启用自动播放

// 轮播图数据
const banners = reactive([
  {
    id: 1,
    title: '新年大促销',
    shortTitle: '新年大促',
    subtitle: '全场商品5折起，限时抢购',
    showSubtitleOnMobile: false,
    image: resolveImage('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&h=400&fit=crop'),
    price: '299',
    originalPrice: '599',
    showOriginalPriceOnMobile: true,
    buttonText: '立即抢购',
    link: '/products?category=promotion',
    type: 'promotion'
  },
  {
    id: 2,
    title: '智能手机专场',
    shortTitle: '智能手机',
    subtitle: '最新款智能手机，科技改变生活',
    showSubtitleOnMobile: false,
    image: resolveImage('https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=800&h=400&fit=crop'),
    price: '2999',
    originalPrice: '3999',
    showOriginalPriceOnMobile: false,
    buttonText: '查看详情',
    link: '/products?category=phone',
    type: 'product'
  },
  {
    id: 3,
    title: '电脑数码节',
    shortTitle: '电脑数码',
    subtitle: '办公学习必备，高性能电脑推荐',
    showSubtitleOnMobile: false,
    image: resolveImage('https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=800&h=400&fit=crop'),
    price: '4999',
    originalPrice: '6999',
    showOriginalPriceOnMobile: false,
    buttonText: '立即购买',
    link: '/products?category=computer',
    type: 'product'
  },
  {
    id: 4,
    title: '时尚服饰',
    shortTitle: '时尚服饰',
    subtitle: '春季新款上市，穿出你的风格',
    showSubtitleOnMobile: true,
    image: resolveImage('https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&h=400&fit=crop'),
    price: '199',
    originalPrice: '399',
    showOriginalPriceOnMobile: true,
    buttonText: '逛逛看',
    link: '/products?category=fashion',
    type: 'category'
  },
  {
    id: 5,
    title: '家居生活',
    shortTitle: '家居生活',
    subtitle: '品质生活从家开始，精选家居好物',
    showSubtitleOnMobile: false,
    image: resolveImage('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=400&fit=crop'),
    price: '599',
    originalPrice: '999',
    showOriginalPriceOnMobile: false,
    buttonText: '发现更多',
    link: '/products?category=home',
    type: 'category'
  }
])

// 检测屏幕尺寸
const checkScreenSize = () => {
  isMobile.value = window.innerWidth <= 768
}

// 处理轮播图点击
const handleBannerClick = (banner) => {
  if (banner.link) {
    router.push(banner.link)
  }
}

// 已移除按钮与覆盖层交互，保留整卡点击跳转

onMounted(() => {
  console.log('轮播图组件加载完成')
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenSize)
})
</script>

<style scoped>
.home-banner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.banner-carousel {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.banner-carousel :deep(.el-carousel__container) {
  width: 100%;
  height: 100%;
}

.banner-carousel :deep(.el-carousel__item) {
  width: 100%;
  height: 100%;
}

.banner-carousel :deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  color: #ffffff;
  width: 50px;
  height: 50px;
}

.banner-carousel :deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.7);
}

.banner-carousel :deep(.el-carousel__indicators) {
  bottom: 20px;
}

.banner-carousel :deep(.el-carousel__indicator) {
  width: 12px;
  height: 12px;
  margin: 0 6px;
}

.banner-carousel :deep(.el-carousel__button) {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

.banner-carousel :deep(.el-carousel__indicator.is-active .el-carousel__button) {
  background-color: #e23e3e;
}

.banner-item {
  height: 100%;
  cursor: pointer;
}

.banner-content {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
}

/* 已移除覆盖层与文案，保留图片轮播，点击整图跳转 */

/* 响应式设计 */
@media (max-width: 992px) {
  /* 覆盖层相关样式已移除 */
}

@media (max-width: 768px) {
  .banner-carousel {
    min-height: 250px;
  }

  /* 覆盖层相关样式已移除 */

  .banner-carousel :deep(.el-carousel__arrow) {
    display: none;
  }

  .banner-carousel :deep(.el-carousel__indicators) {
    bottom: 12px;
  }

  .banner-carousel :deep(.el-carousel__indicator) {
    width: 8px;
    height: 8px;
    margin: 0 4px;
  }

  .banner-carousel :deep(.el-carousel__button) {
    width: 8px;
    height: 8px;
  }
}

@media (max-width: 480px) {
  .banner-carousel {
    min-height: 200px;
  }

  /* 覆盖层相关样式已移除 */

  .banner-carousel :deep(.el-carousel__indicators) {
    bottom: 8px;
  }

  .banner-carousel :deep(.el-carousel__indicator) {
    width: 6px;
    height: 6px;
    margin: 0 3px;
  }

  .banner-carousel :deep(.el-carousel__button) {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 360px) {
  .banner-carousel {
    min-height: 180px;
  }

  .banner-overlay {
    padding: 12px;
  }

  .banner-title {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .banner-subtitle {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .banner-price {
    margin-bottom: 12px;
  }

  .price-value {
    font-size: 16px;
  }

  .price-label {
    font-size: 10px;
    padding: 2px 4px;
  }

  .price-original {
    font-size: 11px;
  }

  .banner-button {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
  .banner-item {
    -webkit-tap-highlight-color: transparent;
  }
  
  .banner-button {
    -webkit-tap-highlight-color: rgba(226, 62, 62, 0.3);
  }
  
  .banner-button:active {
    transform: scale(0.98);
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .banner-title {
    text-rendering: optimizeLegibility;
  }
  
  .banner-subtitle {
    text-rendering: optimizeLegibility;
  }
}
</style>